<template>
  <div class="body">
    <div class="grid-content bg-purple left-block">
      <div class="top-div">
        <div class="main">
          <div class="head-img">
            <img
              src="http://localhost:8082/avatar/16348666662397153.jpg"
              class="head-shot"
              onmouseover="this.src='http://localhost:8082/avatar/16348666662397153.jpg'"
              onmouseout="this.src='http://localhost:8082/avatar/16348666662397153.jpg'"
              alt="">
          </div>
          <div class="caption">
            <a href="http://www.youtiy.com/" style="color:white;">In_y°</a>
          </div>
          <div class="des">
            <span style="color: white;" class="span-text">我的名字：“王官阳”</span>
            <span style="color: white;" class="span-text">个人笔记</span>
            <span style="color: white;" class="span-text">=== 微信：18286349520 ===</span>
            <div class="menu" style="color: white;">
              <span><router-link to="/homeContent">首页</router-link></span>/
              <span><router-link to="/articleInfo">网页设计</router-link></span>/
              <span><router-link to="/info">前端设计</router-link></span>/
              <span>后端设计</span></div>
            <form method="post">
              <div class="search"><label for="iptSearch"></label><input type="text" id="iptSearch" name="title"/>
                <div id="btnSearch">搜索</div>
              </div>
            </form>
          </div>
        </div>
        <div class="bottom">
          © 邮箱 | 729520274@qq.com
        </div>
      </div>
    </div>
    <div class="right-block">
      <div class="grid-content bg-purple-light right-block">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

import ComeContent from './content/homeContent'

export default {
  name: 'Home',
  // eslint-disable-next-line vue/no-unused-components
  components: { ComeContent },
  data() {
    return {
      user: this.$route.query.user
    }
  }

}
</script>

<style scoped>

.body {
  background-color: #F7F7F7;
  display: flex;
  justify-content: flex-start;
}

.float {
  float: right;
}

.left-block {
  width: 380px;
  height: 750px;
  margin: 0px;
  padding: 0px;
  background: url(http://localhost:8082/img/12.jpg) 0 0 no-repeat, url(http://localhost:8082/img/b2.jpg) 0 666px repeat;
}

.top-div {
  width: 100%;
  height: 100%;
  z-index: 2;
  color: white;
}

.main {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.bottom {
  text-align: center;
  width: 100%;
  line-height: 30px;
  margin-top: 90px;
  color: white;
}

.head-img {
  margin: 0 auto;
  width: 100px;
}

.head-shot {
  margin: 0 auto;
  -webkit-border-radius: 110px;
  border-radius: 110px;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -moz-transition: -moz-transform 0.4s ease-out;
  -o-transition: -o-transform 0.4s ease-out;
  -ms-transition: -ms-transform 0.4s ease-out;
  width: 130px;
  height: 130px;
  box-shadow: 0 0 0 5px #fff;
}

.caption {
  margin: 0 auto;
  width: 160px;
  margin-left: 90px;
  color: white;
  font-size: 30px;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}

/*daohang*/
.des {
  margin: 0 auto;
  color: white;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}

.des .menu {
  margin-top: 15px;
}

.des .menu span {
  display: inline;
  font-size: 13px;
  margin: 5px;
  cursor: pointer;
}

.span-text {
  display: block;
  margin-top: 15px;
}

/*sou suo kuang */
.des .search {
  margin-top: 15px;
  padding-left: 20px;
  display: block;
}

.des .search input {
  width: 200px;
  float: left;
  height: 25px;
  background-color: transparent;
  border: 1px solid white;
  color: white;
}

.search div {
  float: left;
  text-align: center;
  background: white;
  height: 29px;
  margin-top: 0px;
  width: 60px;
  line-height: 29px;
  color: #FF7256;
  cursor: pointer;
}

/*zuobianneirong*/
.right-block {
  float: right;
  height: 100%;
  width: 700px;
  margin: 0 auto;
  background-color: #F7F7F7;
}

</style>
